<template>
	<div :style='{"width":"100%","padding":"20px 40px","fontSize":"14px"}'>
		<el-form
			:style='{"padding":"40px 30px","borderColor":"#eee","borderRadius":"10px","borderStyle":"solid","borderWidth":"0px 0 0","background":"none"}'
			class="add-update-preview"
			ref="ruleForm"
			:model="ruleForm"
			label-width="280px"
		>
				<el-form-item :style='{"border":"0px solid #eee","width":"75%","padding":"0","margin":"0 0 20px 0","display":"inline-block"}'   v-if="flag=='jianceyuan'"  label="工号" prop="gonghao">
					<el-input v-model="ruleForm.gonghao" readonly						placeholder="工号" clearable></el-input>
				</el-form-item>
				<el-form-item :style='{"border":"0px solid #eee","width":"75%","padding":"0","margin":"0 0 20px 0","display":"inline-block"}'   v-if="flag=='jianceyuan'"  label="姓名" prop="xingming">
					<el-input v-model="ruleForm.xingming" 						placeholder="姓名" clearable></el-input>
				</el-form-item>
				<el-form-item :style='{"border":"0px solid #eee","width":"75%","padding":"0","margin":"0 0 20px 0","display":"inline-block"}' v-if="flag=='jianceyuan'"  label="性别" prop="xingbie">
					<el-select v-model="ruleForm.xingbie"  placeholder="请选择性别">
						<el-option
							v-for="(item,index) in jianceyuanxingbieOptions"
							v-bind:key="index"
							:label="item"
							:value="item">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item :style='{"border":"0px solid #eee","width":"75%","padding":"0","margin":"0 0 20px 0","display":"inline-block"}' v-if="flag=='jianceyuan'"  label="部门" prop="bumen">
					<el-select v-model="ruleForm.bumen"  placeholder="请选择部门">
						<el-option
							v-for="(item,index) in jianceyuanbumenOptions"
							v-bind:key="index"
							:label="item"
							:value="item">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item :style='{"border":"0px solid #eee","width":"75%","padding":"0","margin":"0 0 20px 0","display":"inline-block"}' v-if="flag=='jianceyuan'"  label="岗位" prop="gangwei">
					<el-select v-model="ruleForm.gangwei"  placeholder="请选择岗位">
						<el-option
							v-for="(item,index) in jianceyuangangweiOptions"
							v-bind:key="index"
							:label="item"
							:value="item">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item :style='{"border":"0px solid #eee","width":"75%","padding":"0","margin":"0 0 20px 0","display":"inline-block"}' v-if="flag=='jianceyuan'" label="头像" prop="touxiang">
					<file-upload
						tip="点击上传头像"
						action="file/upload"
						:limit="3"
						:multiple="true"
						:fileUrls="ruleForm.touxiang?ruleForm.touxiang:''"
						@change="jianceyuantouxiangUploadChange"
					></file-upload>
				</el-form-item>
				<el-form-item :style='{"border":"0px solid #eee","width":"75%","padding":"0","margin":"0 0 20px 0","display":"inline-block"}'   v-if="flag=='jianceyuan'"  label="手机号" prop="mobile">
					<el-input v-model="ruleForm.mobile" 						placeholder="手机号" clearable></el-input>
				</el-form-item>
				<el-form-item :style='{"border":"0px solid #eee","width":"75%","padding":"0","margin":"0 0 20px 0","display":"inline-block"}'   v-if="flag=='jishurenyuan'"  label="技术账号" prop="jishuzhanghao">
					<el-input v-model="ruleForm.jishuzhanghao" readonly						placeholder="技术账号" clearable></el-input>
				</el-form-item>
				<el-form-item :style='{"border":"0px solid #eee","width":"75%","padding":"0","margin":"0 0 20px 0","display":"inline-block"}'   v-if="flag=='jishurenyuan'"  label="技术姓名" prop="jishuxingming">
					<el-input v-model="ruleForm.jishuxingming" 						placeholder="技术姓名" clearable></el-input>
				</el-form-item>
				<el-form-item :style='{"border":"0px solid #eee","width":"75%","padding":"0","margin":"0 0 20px 0","display":"inline-block"}' v-if="flag=='jishurenyuan'"  label="性别" prop="xingbie">
					<el-select v-model="ruleForm.xingbie"  placeholder="请选择性别">
						<el-option
							v-for="(item,index) in jishurenyuanxingbieOptions"
							v-bind:key="index"
							:label="item"
							:value="item">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item :style='{"border":"0px solid #eee","width":"75%","padding":"0","margin":"0 0 20px 0","display":"inline-block"}' v-if="flag=='jishurenyuan'"  label="部门" prop="bumen">
					<el-select v-model="ruleForm.bumen"  placeholder="请选择部门">
						<el-option
							v-for="(item,index) in jishurenyuanbumenOptions"
							v-bind:key="index"
							:label="item"
							:value="item">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item :style='{"border":"0px solid #eee","width":"75%","padding":"0","margin":"0 0 20px 0","display":"inline-block"}' v-if="flag=='jishurenyuan'"  label="岗位" prop="gangwei">
					<el-select v-model="ruleForm.gangwei"  placeholder="请选择岗位">
						<el-option
							v-for="(item,index) in jishurenyuangangweiOptions"
							v-bind:key="index"
							:label="item"
							:value="item">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item :style='{"border":"0px solid #eee","width":"75%","padding":"0","margin":"0 0 20px 0","display":"inline-block"}' v-if="flag=='jishurenyuan'" label="头像" prop="touxiang">
					<file-upload
						tip="点击上传头像"
						action="file/upload"
						:limit="3"
						:multiple="true"
						:fileUrls="ruleForm.touxiang?ruleForm.touxiang:''"
						@change="jishurenyuantouxiangUploadChange"
					></file-upload>
				</el-form-item>
				<el-form-item :style='{"border":"0px solid #eee","width":"75%","padding":"0","margin":"0 0 20px 0","display":"inline-block"}'   v-if="flag=='jishurenyuan'"  label="简介" prop="jianjie">
					<el-input v-model="ruleForm.jianjie" 						placeholder="简介" clearable></el-input>
				</el-form-item>
				<el-form-item :style='{"border":"0px solid #eee","width":"75%","padding":"0","margin":"0 0 20px 0","display":"inline-block"}'   v-if="flag=='jishurenyuan'"  label="手机号" prop="mobile">
					<el-input v-model="ruleForm.mobile" 						placeholder="手机号" clearable></el-input>
				</el-form-item>
				<el-form-item :style='{"border":"0px solid #eee","width":"75%","padding":"0","margin":"0 0 20px 0","display":"inline-block"}' v-if="flag=='users'" label="用户名" prop="username">
					<el-input v-model="ruleForm.username" placeholder="用户名"></el-input>
				</el-form-item>
				<el-form-item :style='{"border":"0px solid #eee","width":"75%","padding":"0","margin":"0 0 20px 0","display":"inline-block"}' v-if="flag=='users'" label="头像" prop="image">
					<file-upload
						tip="点击上传头像"
						action="file/upload"
						:limit="1"
						:multiple="false"
						:fileUrls="ruleForm.image?ruleForm.image:''"
						@change="usersimageUploadChange"
					></file-upload>
				</el-form-item>
				<el-form-item :style='{"padding":"0","margin":"20px 0 0"}'>
					<el-button class="btn3" :style='{"border":"0px solid #ccc","cursor":"pointer","padding":"0 10px","margin":"0 10px 0 0","color":"#fff","borderRadius":"4px","background":"#6284f1","width":"auto","fontSize":"15px","minWidth":"110px","height":"40px"}' type="primary" @click="onUpdateHandler">
						<span class="icon iconfont icon-xihuan" :style='{"margin":"0 2px","fontSize":"14px","color":"#fff","display":"none","height":"40px"}'></span>
						确定
					</el-button>
				</el-form-item>
		</el-form>
	</div>
</template>
<script>
// 校验引入
import { 
	isMobile,
} from "@/utils/validate";

export default {
	data() {
		return {
			ruleForm: {},
			flag: '',
			usersFlag: false,
			jianceyuanxingbieOptions: [],
			jianceyuanbumenOptions: [],
			jianceyuangangweiOptions: [],
			jishurenyuanxingbieOptions: [],
			jishurenyuanbumenOptions: [],
			jishurenyuangangweiOptions: [],
		};
	},
	mounted() {
		var table = this.$storage.get("sessionTable");
		this.flag = table;
		this.$http({
			url: `${this.$storage.get("sessionTable")}/session`,
			method: "get"
		}).then(({ data }) => {
			if (data && data.code === 0) {
				this.ruleForm = data.data;
			} else {
				this.$message.error(data.msg);
			}
		});
		this.jianceyuanxingbieOptions = "男,女".split(',')
		this.$http({
			url: `option/bumen/bumen`,
			method: "get"
		}).then(({ data }) => {
			if (data && data.code === 0) {
				this.jianceyuanbumenOptions = data.data;
			} else {
				this.$message.error(data.msg);
			}
		});
		this.$http({
			url: `option/gangwei/gangwei`,
			method: "get"
		}).then(({ data }) => {
			if (data && data.code === 0) {
				this.jianceyuangangweiOptions = data.data;
			} else {
				this.$message.error(data.msg);
			}
		});
		this.jishurenyuanxingbieOptions = "男,女".split(',')
		this.$http({
			url: `option/bumen/bumen`,
			method: "get"
		}).then(({ data }) => {
			if (data && data.code === 0) {
				this.jishurenyuanbumenOptions = data.data;
			} else {
				this.$message.error(data.msg);
			}
		});
		this.$http({
			url: `option/gangwei/gangwei`,
			method: "get"
		}).then(({ data }) => {
			if (data && data.code === 0) {
				this.jishurenyuangangweiOptions = data.data;
			} else {
				this.$message.error(data.msg);
			}
		});
	},
	methods: {
		jianceyuantouxiangUploadChange(fileUrls) {
			this.ruleForm.touxiang = fileUrls;
		},
		jishurenyuantouxiangUploadChange(fileUrls) {
			this.ruleForm.touxiang = fileUrls;
		},
		usersimageUploadChange(fileUrls) {
			this.ruleForm.image = fileUrls;
		},
		onUpdateHandler() {
			if((!this.ruleForm.gonghao)&& 'jianceyuan'==this.flag){
				this.$message.error('工号不能为空');
				return
			}


			if((!this.ruleForm.mima)&& 'jianceyuan'==this.flag){
				this.$message.error('密码不能为空');
				return
			}

			if((!this.ruleForm.xingming)&& 'jianceyuan'==this.flag){
				this.$message.error('姓名不能为空');
				return
			}










			if(this.ruleForm.touxiang!=null) {
				this.ruleForm.touxiang = this.ruleForm.touxiang.replace(new RegExp(this.$base.url,"g"),"");
			}






			if( 'jianceyuan' ==this.flag && this.ruleForm.mobile&&(!isMobile(this.ruleForm.mobile))){
				this.$message.error(`手机号应输入手机格式`);
				return
			}
			if((!this.ruleForm.jishuzhanghao)&& 'jishurenyuan'==this.flag){
				this.$message.error('技术账号不能为空');
				return
			}


			if((!this.ruleForm.mima)&& 'jishurenyuan'==this.flag){
				this.$message.error('密码不能为空');
				return
			}

			if((!this.ruleForm.jishuxingming)&& 'jishurenyuan'==this.flag){
				this.$message.error('技术姓名不能为空');
				return
			}










			if(this.ruleForm.touxiang!=null) {
				this.ruleForm.touxiang = this.ruleForm.touxiang.replace(new RegExp(this.$base.url,"g"),"");
			}








			if( 'jishurenyuan' ==this.flag && this.ruleForm.mobile&&(!isMobile(this.ruleForm.mobile))){
				this.$message.error(`手机号应输入手机格式`);
				return
			}
			if('users'==this.flag && this.ruleForm.username.trim().length<1) {
				this.$message.error(`用户名不能为空`);
				return	
			}
			if(this.flag=='users'){
				this.ruleForm.image = this.ruleForm.image.replace(new RegExp(this.$base.url,"g"),"")
			}
			this.$http({
				url: `${this.$storage.get("sessionTable")}/update`,
				method: "post",
				data: this.ruleForm
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.$message({
						message: "修改信息成功",
						type: "success",
						duration: 1500,
						onClose: () => {
							if(this.flag=='users'){
								this.$storage.set('headportrait',this.ruleForm.image)
							}
						}
					});
				} else {
					this.$message.error(data.msg);
				}
			});
		}
	}
};
</script>
<style lang="scss" scoped>
	.el-date-editor.el-input {
		width: auto;
	}
	
	.add-update-preview .el-form-item /deep/ .el-form-item__label {
				padding: 0 10px 0 0;
				color: #6e6e6e;
				font-weight: 500;
				width: 280px;
				font-size: 15px;
				line-height: 40px;
				text-align: right;
			}
	
	.add-update-preview .el-form-item /deep/ .el-form-item__content {
		margin-left: 280px;
	}
	
	.add-update-preview .el-input /deep/ .el-input__inner {
				border: 1px solid #E8E8E8;
				border-radius: 0px;
				padding: 0 12px;
				color: #666;
				width: 100%;
				font-size: 15px;
				min-width: 50%;
				height: 40px;
			}
	
	.add-update-preview .el-select /deep/ .el-input__inner {
				border: 1px solid #E8E8E8;
				border-radius: 0px;
				padding: 0 10px;
				color: #666;
				width: 100%;
				font-size: 15px;
				height: 40px;
			}
	
	.add-update-preview .el-date-editor /deep/ .el-input__inner {
				border: 1px solid #E8E8E8;
				border-radius: 0px;
				padding: 0 10px 0 30px;
				color: #666;
				background: #fff;
				width: 100%;
				font-size: 15px;
				height: 40px;
			}
	
	.add-update-preview /deep/ .el-upload--picture-card {
		background: transparent;
		border: 0;
		border-radius: 0;
		width: auto;
		height: auto;
		line-height: initial;
		vertical-align: middle;
	}
	
	.add-update-preview /deep/ .el-upload-list .el-upload-list__item {
				border: 1px solid #E8E8E8;
				cursor: pointer;
				border-radius: 0px;
				color: #666;
				background: #fff;
				width: 90px;
				font-size: 24px;
				line-height: 60px;
				text-align: center;
				height: 60px;
			}
	
	.add-update-preview /deep/ .el-upload .el-icon-plus {
				border: 1px solid #E8E8E8;
				cursor: pointer;
				border-radius: 0px;
				color: #666;
				background: #fff;
				width: 90px;
				font-size: 24px;
				line-height: 60px;
				text-align: center;
				height: 60px;
			}
	
	.add-update-preview .el-textarea /deep/ .el-textarea__inner {
				border: 1px solid #E8E8E8;
				border-radius: 0px;
				padding: 12px;
				color: #666;
				background: #fff;
				width: auto;
				font-size: 15px;
				min-width: 100%;
				height: 120px;
			}
	
	.add-update-preview .btn3 {
				border: 0px solid #ccc;
				cursor: pointer;
				border-radius: 4px;
				padding: 0 10px;
				margin: 0 10px 0 0;
				color: #fff;
				background: #6284f1;
				width: auto;
				font-size: 15px;
				min-width: 110px;
				height: 40px;
			}
	
	.add-update-preview .btn3:hover {
				opacity: 0.9;
			}
	
	.editor>.avatar-uploader {
		line-height: 0;
		height: 0;
	}
</style>
